<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>弓友之家</title>
    <link rel="stylesheet" href="css/mui.css" />
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">个人报名</h1>
		<!--<a class="mui-icon mui-icon-more-filled mui-pull-right shareBtn"></a>-->
	</header>
	<div class="mui-content">
		<div class="sign-peo">
			<div class="fiximg"><img src="" /></div>
			<div class="tel mui-clearfix">
				<img src="images/icon11.png" class="mui-pull-left" />
				<span>报名咨询：<font></font></span>
				<a href="tel:" class="mui-pull-right dotel"><img src="images/icon8.png"/></a>
			</div>
			<div class="mui-content-padded signinfo">
				<header><img src="images/icon10.png"/>请您填写报名信息</header>
				<div class="img">
					<input type="hidden" data-src="" />
					<img class="head-img" id="signimg" src="images/upimg.png" />
				</div>
				<form>
					<div class="item mui-clearfix">
						<label><span>*</span>姓名：</label>
						<input type="text" id="name" />
					</div>
					<div class="item mui-clearfix">
						<label><span>*</span>性别：</label>
						<select class="sex">
							<option value="1">男</option>
							<option value="2">女</option>
						</select>
					</div>
					<div class="item mui-clearfix">
						<label><span>*</span>电话：</label>
						<input type="number" id="mobile" />
					</div>
					<div class="item mui-clearfix">
						<label><span>*</span>地区：</label>
						<div data-toggle="distpicker" class="distpicker">
							<select id="province"></select>
							<select id="city"></select>
							<select id="area"></select>
						</div>
					</div>
					<h4 class="mui-text-center on"><i></i>我已阅读并接受<a href="xieyi.html">《弓友之家比赛报名协议》</a></h4>
					<button type="button" class="signBtn">报名提交</button>
				</form>
			</div>
		</div>
	</div>
	<!--报名费-->
	<div class="signmoney mui-hidden">
		<p>您需要支付报名费</p>
		<h4>100元/人</h4>
		<button type="button">立即支付</button>
	</div>
	<!--分享-->
	<div class="shareWx mui-hidden"> 
		<ul class="mui-list-unstyled">
			<li class="tel"><a href="javascript:void(0)" onclick="shareWeixinMessage(1)">微信好友</a></li>
			<li class="qq"><a href="javascript:void(0)" onclick="shareWeixinMessage(2)">朋友圈</a></li>
		</ul>
		<button type="button" class="cancleShare">取消</button>
	</div>
	<script type="text/javascript" src="js/mui.min.js" ></script>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
	<script type="text/javascript" src="js/signupload.js" ></script>
	<script type="text/javascript" src="js/distpicker.data.js" ></script>
	<script type="text/javascript" src="js/distpicker.js" ></script>
	<script type="text/javascript" src="js/common.js" ></script>
	<script type="text/javascript" charset="utf-8">
      	mui.init();
      	mui.plusReady(function(){
      		mui.ajax(H_SRC+'/amier/index/match_apply',{
				data:{
					token:token,
					type:1
				},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；            
				success:function(data){
					var dataurl=data.data;
					if(data.code == 401)
					{
						mui.openWindow({
							url:'login.html',
							id:'login.html'
						})
					}else if(data.code == 1) 
					{
						var dataurl=data.data;
						$(".fiximg img").attr("src",H_SRC+dataurl.pic);
						$(".tel font").html(dataurl.phone);
						$(".dotel").attr("href","tel:"+dataurl.phone);
						$(".signmoney h4").html(dataurl.price+"/人 ")
					}else{ 
						mui.toast(data.msg);
					}
				},
				error:function(){
				}
			}) 
      	})
      	var myreg =/^1[3|4|5|7|8][0-9]{9}$/; 
      	$(".signBtn").on("tap",function(){
      		var name=$("#name").val();
      		var mobile=$("#mobile").val();
      		var img=$(".img input").attr("data-src");
      		if(img==""){
      			mui.toast("请上传参赛头像");
      			return false;
      		}
      		if(name==""){
      			mui.toast("姓名不能为空，请重新输入");
      			return false;
      		}
      		if(!myreg.test(mobile)||mobile==""){
				mui.toast("请输入正确的手机号");
				return false;
			}
      		mask.show();
      		$(".signmoney").removeClass("mui-hidden");
      	})
      	
      	$(".signmoney button").on("tap",function(){
      		var name=$("#name").val();
      		var mobile=$("#mobile").val();
      		var img=$(".img input").attr("data-src");
      		var sex=$(".sex").children("option:selected").val();
      		var p=$("#province").children("option:selected").val();
      		var c=$("#city").children("option:selected").val();
      		var a=$("#area").children("option:selected").val();
      		var money=parseFloat($(".signmoney h4").html());
      		
      		var address=p+""+c+""+a;
      		mui.ajax(H_SRC+'/amier/index/apply_submit',{
				data:{
					token:token,
					type:1,
					name:name,
					sex:sex,
					phone:mobile,
					address:address,
					header_img:img
				},
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；            
				success:function(data){
					var orderid=data.data.order_id;
					var type=data.data.type;
					$(".signmoney").addClass("mui-hidden");
					mask.close();
					mui.openWindow({
						url:'pay.html',
						id:'pay.html',
						extras:{
							orderid:orderid,
							money:money,
							type:type
						},
						createNew:true
					})
				},
				error:function(){
				}
			}) 
      		
      	})
    </script>
</body>
</html>